<template>
    <div class="view">
        <div class="carousal">
            <el-carousel height="400px">
                <el-carousel-item>
                    <img src="../assets/lb1.jpg" class="imgcar" alt="">

                </el-carousel-item>
                <el-carousel-item>
                    <img src="../assets/lb2.jpg" alt="" class="imgcar">

                </el-carousel-item>
                <el-carousel-item>
                    <img src="../assets/lb3.jpg" alt="" class="imgcar">

                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="typelist">
            <div v-for="item in typelist" class="typeitem">
                <img :src="item.icon" alt="">
                <div>
                    {{ item.name }}
                </div>
            </div>
        </div>
        <div class="coffeelist1">
            <div class="utitle">
                <img src="../assets/coffeeicon.png"
                    style="width: 50px;height: 50px;vertical-align: bottom;margin-right: 10px;" alt="">
                <span style="margin-right: 10px;">热销咖啡TOP4</span>
                精选人气咖啡，每一口都是独特的味觉盛宴
            </div>
            <div class="coffeelist">
                <el-card class="coffeeitem" @click="todetail(item)" v-for="item in coffeelist">
                    <div class="coffeeicon">
                        <img :src="item.icon" alt="">
                    </div>
                    <div class="coffeeinfo">
                        <div class="coffeename">{{ item.name }}</div>
                        <div class="coffeenum">
                            <div class="price">
                                ￥{{item.price}}
                            </div>
                            <div class="hassale">已售{{item.buyNum}}</div>
                        </div>
                            <div style="text-align: right;">
                        <el-button @click="todetail(item)" size="small" type="primary" plain>详情</el-button>
                    </div>
                    </div>
                </el-card>
            </div>

        </div>
    </div>
</template>
<script>

import service from '@/request';
export default {
    data() {
        return {
            typelist: [],
            coffeelist: []
        }
    },
    mounted() {
        this.getlist()
        this.getcoffeeTop4()
    },
    methods: {
          todetail(item){
            this.$router.push({
                path:"/shopdetail",
                query:{
                    id:item.id
                }
            })
        },
        async getcoffeeTop4() {
            const res = await service.get("/info/coffeetop4");
            console.log(res)
            this.coffeelist = res.data
        },
        async getlist() {
            const res = await service.get("/type/all");
            console.log(res)
            this.typelist = res.data
        }
    }
}
</script>
<style scoped>
.coffeeinfo {
    width: 100%;

    padding: 10px;
    box-sizing: border-box;

}

.coffeename {
    font-size: 20px;
}

.coffeeitem {
    width: 20%;
}

.coffeeicon img {
    width: 100%;
    height: 200px;
}

.coffeeicon {
    width: 100%;
}

.typelist {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;

}

.utitle {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 10px;
}

.utitle span {
    font-size: 40px;
    color: #333;
}

.typeitem {
    width: 20%;
    text-align: center;
}

.typeitem img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.carousal {
    width: 100%;
    margin-bottom: 10px;
}

.view {
    width: 100%;
}

.imgcar {
    width: 100%;
    height: 100%;
}

.coffeelist {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-around;
}
.coffeenum{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    align-items: center;
}
.price{
    color: red;
    font-weight: bold;
    font-size: 24px;
}
.hassale{
    color: #ccc;
    font-size: 14px;
}
</style>